<template>
  <el-dialog v-model="dialogVisible" :title="`用户信息绑定 - ${curriculumName}`" width="1300" :before-close="handleClose">
    <el-table :data="list">
      <el-table-column label="排序" width="100">
        <template #default="scope">
          <el-input v-model.number="scope.row.sort" placeholder="排序" type="number" />
        </template>
      </el-table-column>
      <el-table-column label="字段名称" width="180">
        <template #default="scope">
          <dictSelect v-model="scope.row.fieldName" dictCode="user_info"></dictSelect>
          <!-- <el-input v-model="scope.row.fieldName" placeholder="请选择字段名称(例如：手机号码)" /> -->
        </template>
      </el-table-column>
      <el-table-column label="类型" width="150">
        <template #default="scope">
          <el-select v-model="scope.row.type" placeholder="请选择类型">
            <el-option label="输入框" value="input" />
            <el-option label="下拉选项" value="select" />
            <el-option label="单选框" value="radio" />
            <el-option label="多选框" value="checkbox" />
            <el-option label="关联性" value="relation" />
            <el-option label="上传图片" value="image" />
            <el-option label="模板上传" value="templateFile" />
            <el-option label="上传文件" value="file" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="默认值（类型为下拉选项时可编辑）">
        <template #default="scope">
          <!-- 上传模板 -->
          <div v-if="scope.row.type=='templateFile'">
            <el-button text type="primary" @click="uploadFile(scope.$index)" v-if="scope.row.file&&scope.row.file.length">{{scope.row.file[0].name}}</el-button>
            <el-button text type="primary" @click="uploadFile(scope.$index)" v-else :disabled="scope.row.type!='templateFile'">上传模板</el-button>
          </div>
          <!-- 单选框、多选框类型： -->
          <courseValueTable v-model="scope.row.defaultValueTable" v-else-if="['radio','checkbox'].includes(scope.row.type)"></courseValueTable>
          <!-- 关联 -->
          <courseUserInfoRelation v-model="scope.row.defaultValueTableChildren" v-else-if="scope.row.type ==='relation'"></courseUserInfoRelation>
          <!-- 普通类型： -->
          <el-input v-else v-model="scope.row.defaultValue" placeholder="请输入默认值(英文逗号分隔)" :disabled="scope.row.type!= 'select'" />
        </template>
      </el-table-column>

      <el-table-column width="80" label="操作" align="center">
        <template #header>
          <el-button type="primary" @click="add" circle icon="plus" size="small"></el-button>
        </template>
        <template #default="scope">
          <el-button type="danger" icon="Delete" circle @click="list.splice(scope.$index, 1)" size="small" />
        </template>
      </el-table-column>
    </el-table>

    <FileUploader ref="FileUploaderRef" dataType="jsonArr" v-if="list.length" v-model="list[current].file"></FileUploader>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loading">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import courseUserInfoRelation from "@/views/websiteConfiguration/components/courseUserInfoRelation.vue";
import courseValueTable from "@/views/websiteConfiguration/components/courseValueTable.vue";
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
import { ref } from "vue";
const counter = useCounterStore();

let dialogVisible = ref(false);
let list = ref([]);
let loading = ref(false);
let _id = "";
let curriculumName = ref("");
let current = ref(0);

async function open(row) {
  _id = row._id;
  curriculumName.value = row.name;
  let resp = await proxy.$apis.course({
    data: { _id },
    type: "getSignUpInfo",
  });
  if (resp.hasOwnProperty("needUserParams") && resp.needUserParams.length)
    list.value = resp.needUserParams;
  dialogVisible.value = true;
}

function add() {
  list.value.push({
    type: "input",
    fieldName: "",
    defaultValue: "",
    value: "",
    defaultValueTable: [],
    defaultValueTableChildren: [],
    file: [],
    sort: list.value.length + 1,
  });
}

function handleClose() {
  list.value = [];
  dialogVisible.value = false;
}

function uploadFile(index) {
  current.value = index;
  setTimeout(() => {
    proxy.$refs.FileUploaderRef.open();
  }, 100);
}

async function submit() {
  try {
    loading.value = true;
    let arr = proxy.$utils.deepcopy(list.value);

    await proxy.$apis.course({
      type: "update",
      data: {
        needUserParams: arr.sort(proxy.$utils.compare("sort")),
        _id,
      },
    });
    proxy.$utils.showToast("保存成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

defineExpose({ open });
</script>



<style lang="scss" scoped>
.el-table {
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 10px;
}
</style>






